<template>
  <div class="app-container" style="height: 100%">
    <el-form ref="queryForm" :model="queryParams" size="mini" inline style="white-space: nowrap; overflow-x: auto" :class="{ disabled: disableAction }">
      <el-form-item>
        <header-select @selectProject="onSelectProject" style="line-height: normal" />
      </el-form-item>
      <el-form-item>
        <template v-if="showBtns.add">
          <el-button size="mini" type="primary" icon="el-icon-plus" @click="openAddItem" v-if="queryParams.projectId">新增平面图</el-button>
          <el-popover placement="top" trigger="hover" content="请选择左侧项目" v-else>
            <el-button slot="reference" size="mini" icon="el-icon-plus" style="margin-left: 10px">新增平面图</el-button>
          </el-popover>
        </template>
      </el-form-item>
    </el-form>

    <div v-loading="listLoading" element-loading-background="rgba(255, 255, 255, 0.5)">
      <el-empty description="暂无平面图" v-if="!list.length" />
      <div class="list el-upload-list el-upload-list--picture-card">
        <div class="item" v-for="item in list" :key="item.patProFileId" v-loading="item.removeLoading">
          <div class="el-upload-list__item">
            <el-image class="thumbnail g-img-placeholder" :src="item.url" fit="cover" />
            <dict-tag class="file-type" :options="dict.type.cq_patrol_file_type" :value="item.fileType" />
            <span class="el-upload-list__item-actions">
              <span @click="imgsPreview(item)">
                <i class="el-icon-zoom-in" />
              </span>
              <span @click="$refs.EditItem.open(item)">
                <i class="el-icon-edit" />
              </span>
              <span @click="handleDelete(item)">
                <i class="el-icon-delete" />
              </span>
            </span>
          </div>
          <div class="file-name ellipsis" :title="item.fileName">{{ item.fileName }}</div>
        </div>
      </div>
      <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
    </div>

    <el-image ref="previewRef" class="hide" :src="previewSrc" :preview-src-list="previewSrcList" />
    <EditItem ref="EditItem" v-model="showEditItem" @ok="getList" />
  </div>
</template>
<script>
// 平面图列表
import auth from '@/plugins/auth'
import { getFileURL } from '@/api/common'
import { listPatProFile, delPatProFile } from '@/api/cq/patrol'
import HeaderSelect from './components/HeaderSelect'
import EditItem from './components/EditPatProFile'
export default {
  name: 'PatPlanList',
  components: { HeaderSelect, EditItem },
  dicts: ['cq_patrol_file_type'],
  data() {
    return {
      listLoading: false,
      total: 0,
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: ''
      },
      showEditItem: false,
      previewSrcList: [],
      previewSrc: ''
    }
  },
  computed: {
    disableAction() {
      return this.listLoading
    },
    showBtns() {
      // 操作按钮权限
      const permCode = 'cq:patrol:proFile'
      const edit = auth.hasPermi(`${permCode}:edit`)
      const add = auth.hasPermi(`${permCode}:add`)
      const remove = auth.hasPermi(`${permCode}:remove`)
      const info = auth.hasPermi(`${permCode}:info`)
      return { edit, add, remove, info }
    }
  },
  methods: {
    onSelectProject(project) {
      const projectId = project?.id || ''
      this.queryParams.projectId = projectId
      if (projectId) this.getList()
    },
    async getList() {
      const { projectId } = this.queryParams
      if (!projectId) {
        this.$message('请选择项目')
        return (this.list = [])
      }

      this.listLoading = true
      const res = await listPatProFile({ projectId }).catch(() => false)
      this.listLoading = false
      if (res === false) return (this.list = [])

      const data = res.data || []
      data.map(i => {
        i.removeLoading = false
        i.url = getFileURL(i.fileId)
      })
      this.list = data
      this.total = res.total || 0
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    async handleDelete(item) {
      if (item.removeLoading) return
      const res1 = await this.$confirm(`确认删除：${item.fileName}`, '警告', { type: 'warning' }).catch(() => false)
      if (res1 !== 'confirm') return

      item.removeLoading = true
      const res = await delPatProFile(item.patProFileId).catch(() => false)
      item.removeLoading = false
      if (res === false) return

      this.msgSuccess('删除成功')
      this.list.length > 1 ? this.getList() : this.handleQuery()
    },
    imgsPreview(item) {
      this.previewSrcList = this.list.map(i => i.url)
      this.previewSrc = item.url
      this.$nextTick(() => this.$refs.previewRef?.clickHandler())
    },
    openAddItem() {
      this.$refs.EditItem.open({ projectId: this.queryParams.projectId })
    }
  }
}
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  .item {
    margin: 0 15px 15px 0;
  }
  .el-upload-list__item {
    margin: 0;
  }
  .thumbnail {
    width: 100%;
    height: 100%;
  }
  .file-type {
    position: absolute;
    top: -1px;
    left: -1px;
  }
  .file-name {
    width: 150px;
    text-align: center;
    font-size: 12px;
    color: #5e6d82;
    cursor: unset;
  }
}
</style>
